<template>
  <div id="EnrollmentGuide">
    <div style="display: flex; align-items: center">
      <div class="f14" style="margin-right: 10px">
        共 <span style="color: #409eff">{{ total }}</span> 条
      </div>
      <div class="search-box">
        <el-popover
          placement="bottom-start"
          trigger="click"
          :visible="popperVis"
          popper-class="popoverStyle"
        >
          <template #reference>
            <el-input
              @focus="handleInputFocus"
              @blur="handleInputBlur"
              size="large"
              clearable
              :prefix-icon="Search"
              v-model="searchvalue"
              style="width: 30%"
              placeholder="搜索"
            >
              <template #append>
                <!-- style="background: var(--background-color); color: #fff" -->
                <el-button size="large" @click="handleTbaleSearch"
                  >搜索</el-button
                >
                <!-- <div class="my-btn">搜索</div> -->
              </template>
            </el-input>
          </template>

          <div class="curr">
            <div class="his-item" v-for="item in searchHistory" :key="item">
              {{ item }}
            </div>
          </div>
        </el-popover>
      </div>
    </div>
    <div v-for="item in schoolZSData" :key="item.strId" class="f14">
      <div
        style="
          border-bottom: 1px solid #f2f2f2;
          line-height: 50px;
          justify-content: space-between;
          display: flex;
          align-items: center;
        "
        class="df curr"
      >
        <div style="flex: 1" class="zsjzItem" @click="handleLookDet(item)">
          {{ item.title }}
        </div>
        <div style="flex: 1; text-align: center">浏览{{ item.hits }}</div>
        <div>
          {{ item.createdAt.match(/^\d{4}-\d{2}-\d{2}/)[0] }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue';
const emits = defineEmits(['handleSearchZsjz', 'handleDetShow']);
const popperVis = ref(false);
const { schoolZSData, total } = defineProps({
  schoolZSData: {
    type: Array,
    default: () => [],
  },
  total: {
    type: [String, Number],
    default: '0',
  },
});
const searchHistory = ref([]);

const searchvalue = ref('');

const handleInputFocus = () => {
  if (searchHistory.value.length <= 0) {
    popperVis.value = false;
  } else {
    popperVis.value = true;
  }
};
const handleTbaleSearch = () => {
  searchHistory.value.push(searchvalue.value);
  emits('handleSearchZsjz', searchvalue.value);
};
const handleInputBlur = () => {
  popperVis.value = false;
};
const handleLookDet = (item) => {
  emits('handleDetShow', item);
};
</script>

<style lang="scss" scoped>
.search-box {
  flex: 1;
  margin: 10px 0;
}
.zsjzItem:hover {
  color: #409eff;
}
.el-popover.popoverStyle {
  padding: 0 0 !important;
}
</style>
